<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信用评价系统 - 平台信用等级</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f8f9fc 0%, #eef2f7 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            padding: 20px 0;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
            background: #fff;
            border-radius: 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            position: relative;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #4a6bff 0%, #7b4cff 100%);
            color: white;
            padding: 40px 30px;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            top: -100px;
            right: -80px;
        }
        
        .profile-top {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            position: relative;
            z-index: 2;
        }
        
        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid rgba(255, 255, 255, 0.3);
            overflow: hidden;
            margin-right: 25px;
            background: #5b86e5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-size: 40px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .user-id {
            font-size: 26px;
            opacity: 0.9;
            font-weight: 300;
        }
        
        .account-stats {
            display: flex;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 25px;
            position: relative;
            z-index: 2;
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 24px;
            opacity: 0.9;
        }
        
        /* 主体内容 */
        .main-content {
            padding: 40px 30px;
        }
        
        /* 卡片样式 */
        .card {
            background: #fff;
            border-radius: 20px;
            padding: 35px 30px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
            margin-bottom: 35px;
            border: 1px solid #eee;
        }
        
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f0f4ff;
        }
        
        .card-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #4a6bff 0%, #7b4cff 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 28px;
            margin-right: 20px;
        }
        
        .card-title {
            font-size: 36px;
            font-weight: 600;
            color: #4a6bff;
        }
        
        /* 信用等级展示 */
        .credit-level {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 30px;
            background: linear-gradient(135deg, #f0f4ff 0%, #e6ebff 100%);
            border-radius: 20px;
            margin-bottom: 30px;
        }
        
        .level-badge {
            width: 150px;
            height: 150px;
            background: linear-gradient(135deg, #c0c0c0 0%, #a9a9a9 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .level-badge.gold {
            background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
            box-shadow: 0 10px 20px rgba(218, 165, 32, 0.3);
        }
        
        .level-badge.diamond {
            background: linear-gradient(135deg, #b9f2ff 0%, #4dc0ff 100%);
            box-shadow: 0 10px 20px rgba(77, 192, 255, 0.3);
        }
        
        .level-badge.crown {
            background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
            box-shadow: 0 10px 20px rgba(255, 165, 0, 0.3);
        }
        
        .level-badge i {
            font-size: 70px;
            color: white;
        }
        
        .level-name {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #4a6bff;
        }
        
        .level-score {
            font-size: 36px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        
        .level-range {
            font-size: 26px;
            color: #666;
            margin-bottom: 25px;
        }
        
        .progress-container {
            width: 100%;
            background: #e6e9f0;
            height: 20px;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 25px;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(135deg, #4a6bff 0%, #7b4cff 100%);
            border-radius: 10px;
            width: 65%;
        }
        
        .level-benefits {
            display: flex;
            justify-content: space-around;
            width: 100%;
            margin-top: 20px;
        }
        
        .benefit-item {
            text-align: center;
            padding: 15px;
        }
        
        .benefit-icon {
            font-size: 36px;
            color: #4a6bff;
            margin-bottom: 10px;
        }
        
        .benefit-text {
            font-size: 24px;
            color: #555;
        }
        
        /* 评价规则 */
        .rating-rules {
            background: #f8fbff;
            border-radius: 15px;
            padding: 30px;
            margin-top: 20px;
            border: 1px solid #e1e9ff;
        }
        
        .rules-title {
            font-size: 32px;
            font-weight: 600;
            color: #4a6bff;
            margin-bottom: 25px;
            text-align: center;
        }
        
        .rules-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }
        
        .rule-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
        }
        
        .rule-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        .rule-card.good {
            border-top: 5px solid #52c41a;
        }
        
        .rule-card.medium {
            border-top: 5px solid #faad14;
        }
        
        .rule-card.bad {
            border-top: 5px solid #ff4d4f;
        }
        
        .rule-icon {
            font-size: 50px;
            margin-bottom: 20px;
        }
        
        .good .rule-icon {
            color: #52c41a;
        }
        
        .medium .rule-icon {
            color: #faad14;
        }
        
        .bad .rule-icon {
            color: #ff4d4f;
        }
        
        .rule-title {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .rule-score {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 15px;
        }
        
        .good .rule-score {
            color: #52c41a;
        }
        
        .medium .rule-score {
            color: #faad14;
        }
        
        .bad .rule-score {
            color: #ff4d4f;
        }
        
        .rule-desc {
            font-size: 24px;
            color: #666;
        }
        
        /* 等级体系 */
        .level-system {
            margin-top: 40px;
        }
        
        .level-title {
            font-size: 32px;
            font-weight: 600;
            color: #4a6bff;
            margin-bottom: 25px;
            text-align: center;
        }
        
        .levels-container {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        .level-item {
            flex: 1;
            text-align: center;
            padding: 20px;
            position: relative;
        }
        
        .level-item:not(:last-child):after {
            content: "";
            position: absolute;
            top: 60px;
            right: -10px;
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-left: 20px solid #4a6bff;
            border-bottom: 15px solid transparent;
        }
        
        .level-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 40px;
            color: white;
        }
        
        .level-item:nth-child(1) .level-icon {
            background: linear-gradient(135deg, #c0c0c0 0%, #a9a9a9 100%);
        }
        
        .level-item:nth-child(2) .level-icon {
            background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
        }
        
        .level-item:nth-child(3) .level-icon {
            background: linear-gradient(135deg, #b9f2ff 0%, #4dc0ff 100%);
        }
        
        .level-item:nth-child(4) .level-icon {
            background: linear-gradient(135deg, #ffd700 0%, #ffa500 100%);
        }
        
        .level-item-name {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .level-item-range {
            font-size: 24px;
            color: #666;
        }
        
        /* 评价历史 */
        .rating-history {
            margin-top: 40px;
        }
        
        .history-title {
            font-size: 32px;
            font-weight: 600;
            color: #4a6bff;
            margin-bottom: 25px;
        }
        
        .history-list {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .history-item {
            display: flex;
            padding: 25px;
            border-bottom: 1px solid #eee;
        }
        
        .history-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #f0f4ff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #4a6bff;
            margin-right: 25px;
            flex-shrink: 0;
        }
        
        .history-content {
            flex: 1;
        }
        
        .history-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .history-user {
            font-size: 28px;
            font-weight: 600;
        }
        
        .history-type {
            font-size: 24px;
            color: #666;
        }
        
        .history-rating {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .stars {
            color: #ffc107;
            font-size: 24px;
            margin-right: 15px;
        }
        
        .rating-text {
            font-size: 26px;
            font-weight: 500;
        }
        
        .good .rating-text {
            color: #52c41a;
        }
        
        .medium .rating-text {
            color: #faad14;
        }
        
        .bad .rating-text {
            color: #ff4d4f;
        }
        
        .history-comment {
            font-size: 26px;
            color: #555;
            line-height: 1.5;
        }
        
        .history-date {
            font-size: 24px;
            color: #999;
            text-align: right;
            margin-top: 10px;
        }
        
        /* 评价区域 */
        .rating-section {
            margin-top: 40px;
        }
        
        .rating-form {
            background: #f8fbff;
            border-radius: 20px;
            padding: 30px;
            border: 1px solid #e1e9ff;
        }
        
        .form-title {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 25px;
            color: #4a6bff;
            text-align: center;
        }
        
        .rating-options {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .rating-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 25px;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid #e1e9ff;
            width: 200px;
        }
        
        .rating-option:hover, .rating-option.selected {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .rating-option.good:hover, .rating-option.good.selected {
            border-color: #52c41a;
            background: rgba(82, 196, 26, 0.05);
        }
        
        .rating-option.medium:hover, .rating-option.medium.selected {
            border-color: #faad14;
            background: rgba(250, 173, 20, 0.05);
        }
        
        .rating-option.bad:hover, .rating-option.bad.selected {
            border-color: #ff4d4f;
            background: rgba(255, 77, 79, 0.05);
        }
        
        .rating-icon {
            font-size: 50px;
            margin-bottom: 15px;
        }
        
        .good .rating-icon {
            color: #52c41a;
        }
        
        .medium .rating-icon {
            color: #faad14;
        }
        
        .bad .rating-icon {
            color: #ff4d4f;
        }
        
        .rating-label {
            font-size: 28px;
            font-weight: 500;
        }
        
        textarea {
            width: 100%;
            padding: 25px;
            font-size: 26px;
            border: 2px solid #e1e9ff;
            border-radius: 15px;
            background: #fff;
            min-height: 180px;
            resize: vertical;
            margin-bottom: 30px;
        }
        
        .submit-rating {
            display: block;
            width: 100%;
            padding: 25px;
            background: linear-gradient(135deg, #4a6bff 0%, #7b4cff 100%);
            color: white;
            font-size: 32px;
            font-weight: 600;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .submit-rating:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(74, 107, 255, 0.6);
        }
        
        /* 底部信息 */
        footer {
            text-align: center;
            padding: 40px;
            color: #7d9ed8;
            font-size: 24px;
            margin-top: 20px;
            background: #f8fbff;
            border-top: 1px solid #e1e9ff;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }
        
        .footer-links a {
            color: #5b86e5;
            text-decoration: none;
            font-weight: 500;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
        
        /* 响应式调整 */
        @media (max-width: 750px) {
            .container {
                width: 100%;
                border-radius: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="profile-top">
                <div class="avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="user-info">
                    <div class="user-name">张小明</div>
                    <div class="user-id">ID: U20230815001 | 黄金会员</div>
                </div>
            </div>
            
            <div class="account-stats">
                <div class="stat-item">
                    <div class="stat-value">¥1,250.00</div>
                    <div class="stat-label">账户余额</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">黄金</div>
                    <div class="stat-label">信用等级</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">158</div>
                    <div class="stat-label">信用积分</div>
                </div>
            </div>
        </div>
        
        <div class="main-content">
            <!-- 信用等级卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-medal"></i>
                    </div>
                    <div class="card-title">信用等级</div>
                </div>
                
                <div class="credit-level">
                    <div class="level-badge gold">
                        <i class="fas fa-crown"></i>
                    </div>
                    <div class="level-name">黄金会员</div>
                    <div class="level-score">158 信用积分</div>
                    <div class="level-range">升级钻石会员还需 43 分</div>
                    
                    <div class="progress-container">
                        <div class="progress-bar" style="width: 65%"></div>
                    </div>
                    
                    <div class="level-benefits">
                        <div class="benefit-item">
                            <div class="benefit-icon"><i class="fas fa-percentage"></i></div>
                            <div class="benefit-text">服务费减免</div>
                        </div>
                        <div class="benefit-item">
                            <div class="benefit-icon"><i class="fas fa-tasks"></i></div>
                            <div class="benefit-text">优先派单</div>
                        </div>
                        <div class="benefit-item">
                            <div class="benefit-icon"><i class="fas fa-shield-alt"></i></div>
                            <div class="benefit-text">信用保障</div>
                        </div>
                    </div>
                </div>
                
                <div class="rating-rules">
                    <div class="rules-title">评价规则说明</div>
                    <div class="rules-grid">
                        <div class="rule-card good">
                            <div class="rule-icon"><i class="fas fa-thumbs-up"></i></div>
                            <div class="rule-title">好评</div>
                            <div class="rule-score">+3分</div>
                            <div class="rule-desc">任务完成质量高，服务态度好</div>
                        </div>
                        
                        <div class="rule-card medium">
                            <div class="rule-icon"><i class="fas fa-meh"></i></div>
                            <div class="rule-title">中评</div>
                            <div class="rule-score">+1分</div>
                            <div class="rule-desc">任务基本完成，但存在改进空间</div>
                        </div>
                        
                        <div class="rule-card bad">
                            <div class="rule-icon"><i class="fas fa-thumbs-down"></i></div>
                            <div class="rule-title">差评</div>
                            <div class="rule-score">-3分</div>
                            <div class="rule-desc">任务未完成或服务质量差</div>
                        </div>
                    </div>
                    
                    <div class="level-system">
                        <div class="level-title">信用等级体系</div>
                        <div class="levels-container">
                            <div class="level-item">
                                <div class="level-icon"><i class="fas fa-shield-alt"></i></div>
                                <div class="level-item-name">白银</div>
                                <div class="level-item-range">0-100分</div>
                            </div>
                            
                            <div class="level-item">
                                <div class="level-icon"><i class="fas fa-medal"></i></div>
                                <div class="level-item-name">黄金</div>
                                <div class="level-item-range">101-200分</div>
                            </div>
                            
                            <div class="level-item">
                                <div class="level-icon"><i class="fas fa-gem"></i></div>
                                <div class="level-item-name">钻石</div>
                                <div class="level-item-range">201-500分</div>
                            </div>
                            
                            <div class="level-item">
                                <div class="level-icon"><i class="fas fa-crown"></i></div>
                                <div class="level-item-name">皇冠</div>
                                <div class="level-item-range">501分以上</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评价历史卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-history"></i>
                    </div>
                    <div class="card-title">评价历史</div>
                </div>
                
                <div class="rating-history">
                    <div class="history-title">最近收到的评价</div>
                    
                    <div class="history-list">
                        <div class="history-item">
                            <div class="history-avatar">
                                <i class="fas fa-user-tie"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-header">
                                    <div class="history-user">科技公司</div>
                                    <div class="history-type">任务发布方</div>
                                </div>
                                <div class="history-rating good">
                                    <div class="stars">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <div class="rating-text">好评</div>
                                </div>
                                <div class="history-comment">
                                    设计任务完成得非常出色，超出预期！沟通顺畅，交付及时，非常专业的服务。
                                </div>
                                <div class="history-date">2023年8月15日</div>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div class="history-avatar">
                                <i class="fas fa-store"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-header">
                                    <div class="history-user">时尚商城</div>
                                    <div class="history-type">任务发布方</div>
                                </div>
                                <div class="history-rating good">
                                    <div class="stars">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star-half-alt"></i>
                                    </div>
                                    <div class="rating-text">好评</div>
                                </div>
                                <div class="history-comment">
                                    图片设计符合要求，修改响应迅速，整体体验很好，会继续合作！
                                </div>
                                <div class="history-date">2023年8月10日</div>
                            </div>
                        </div>
                        
                        <div class="history-item">
                            <div class="history-avatar">
                                <i class="fas fa-user-graduate"></i>
                            </div>
                            <div class="history-content">
                                <div class="history-header">
                                    <div class="history-user">王女士</div>
                                    <div class="history-type">个人发布方</div>
                                </div>
                                <div class="history-rating medium">
                                    <div class="stars">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                    <div class="rating-text">中评</div>
                                </div>
                                <div class="history-comment">
                                    任务基本完成，但比预定时间晚了一天，沟通方面可以更积极一些。
                                </div>
                                <div class="history-date">2023年8月5日</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 任务评价卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="card-title">评价任务</div>
                </div>
                
                <div class="rating-section">
                    <div class="rating-form">
                        <div class="form-title">评价任务执行方</div>
                        
                        <div class="form-group">
                            <label>任务名称：网站UI设计</label>
                            <label>执行方：李设计师</label>
                        </div>
                        
                        <div class="rating-options">
                            <div class="rating-option good">
                                <div class="rating-icon"><i class="fas fa-thumbs-up"></i></div>
                                <div class="rating-label">好评</div>
                            </div>
                            
                            <div class="rating-option medium">
                                <div class="rating-icon"><i class="fas fa-meh"></i></div>
                                <div class="rating-label">中评</div>
                            </div>
                            
                            <div class="rating-option bad">
                                <div class="rating-icon"><i class="fas fa-thumbs-down"></i></div>
                                <div class="rating-label">差评</div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>评价内容</label>
                            <textarea placeholder="请描述任务完成情况和服务体验..."></textarea>
                        </div>
                        
                        <button class="submit-rating">提交评价</button>
                    </div>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 平台信用评价系统 | 诚信服务，共享价值</p>
            <div class="footer-links">
                <a href="#">平台规则</a>
                <a href="#">信用说明</a>
                <a href="#">联系客服</a>
                <a href="#">隐私政策</a>
            </div>
        </footer>
    </div>

    <script>
        // 评价选项选择交互
        const ratingOptions = document.querySelectorAll('.rating-option');
        ratingOptions.forEach(option => {
            option.addEventListener('click', function() {
                ratingOptions.forEach(opt => opt.classList.remove('selected'));
                this.classList.add('selected');
            });
        });
        
        // 提交评价交互
        document.querySelector('.submit-rating').addEventListener('click', function() {
            const selectedOption = document.querySelector('.rating-option.selected');
            
            if (!selectedOption) {
                alert('请选择评价类型（好评、中评或差评）');
                return;
            }
            
            const originalText = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交中...';
            this.disabled = true;
            
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-check-circle"></i> 评价成功';
                this.style.background = '#52c41a';
                
                // 显示成功消息
                setTimeout(() => {
                    alert('评价提交成功！感谢您的反馈。');
                    this.innerHTML = originalText;
                    this.disabled = false;
                    this.style.background = 'linear-gradient(135deg, #4a6bff 0%, #7b4cff 100%)';
                    
                    // 重置表单
                    ratingOptions.forEach(opt => opt.classList.remove('selected'));
                    document.querySelector('textarea').value = '';
                }, 1500);
            }, 2000);
        });
        
        // 模拟信用积分增长动画
        setTimeout(() => {
            const scoreElement = document.querySelector('.level-score');
            let score = 158;
            
            const interval = setInterval(() => {
                score += 1;
                scoreElement.textContent = score + ' 信用积分';
                
                if (score >= 165) {
                    clearInterval(interval);
                    
                    // 更新进度条
                    document.querySelector('.progress-bar').style.width = '70%';
                    document.querySelector('.level-range').textContent = '升级钻石会员还需 36 分';
                }
            }, 200);
        }, 3000);
    </script>
</body>
</html>